<template>
	<view class="found">
		<view class="nav-bar">
			<navbar>
				<view slot="center" class="centers">
					<view class="recommend active">精选文章</view>
					<view>好物推荐</view>
				</view>
			</navbar>
		</view>
		<view class="main">
			<view class="icons-main">
				<view @tap="iconClick(index)" class="imgs" :class="index == currentIndex ? 'active' : ''" v-for="(item, index) in iconsList"
				 :key="index">
					<image :src="item" mode=""></image>
				</view>
			</view>
			<view class="actile-list">
				<view @tap="actileClick(item)" class="items" v-for="item in articleList" :key="item.id">
					<view class="imgs">
						<image :src="item.coverImg" mode=""></image>
					</view>
					<view class="item-main">
						<view class="title">{{item.title}}</view>
						<view class="author">{{item.author}}</view>
					</view>
					<view class="items-bottom">
						<view class="icons-left">
							<image src="/static/icons/view.png" mode=""></image>
						</view>
						<view class="icons-right">
							<image src="/static/icons/zan.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar.vue"
	import {
		getDetailList
	} from "@/network/category/index.js"
	import {
		getaritlce
		// getDetail
	} from "@/network/found/index.js"
	export default {
		data() {
			return {
				iconsList: ["/static/icons/chuangyi.png", "/static/icons/shipin.png", "/static/icons/fengge.png",
					"/static/icons/dengju.png"
				],
				currentIndex: 0,
				categoryIdList: [],
				articleList: [],
			};
		},
		components: {
			navbar
		},
		onLoad(iid) {
			console.log(iid, '哈哈哈')
			this.getDetailLists()
		},
		methods: {
			actileClick(item) {
				console.log(item)
				let index = this.articleList.findIndex(items => items.id == item.id);
				let id = this.articleList[index].id
				uni.navigateTo({
					url: '/pages/articleDetail/articleDetail?iid=' + id
				})
				// const res = await getDetail({
				// 	id: this.articleList[index].id
				// })
				// console.log(res, '哈哈2')
			},
		async iconClick(index) {
				this.currentIndex = index
				console.log(index, this.currentIndex)
				const res = await getaritlce({
					kindId: this.categoryIdList[index]
				})
				this.articleList = res.data.data.list
			},
			async getDetailLists() {
				const res = await getDetailList()
				// console.log(res)
				res.data.data.forEach(item => {
					this.categoryIdList.push(item.id)
				})
				// console.log(this.categoryIdList)
				const ress = await getaritlce({
					kindId: this.categoryIdList[0]
				})
				console.log(ress, '发现分页第一页数据')
				this.articleList = ress.data.data.list


				// promise 老写法
				// getDetailList().then(res => {
				// 	console.log(res)
				// 	const arr = [];
				// 	res.data.data.forEach(item => {
				// 		arr.push(item.id)
				// 	})
				// 	console.log(arr)
				// 	this.categoryIdList = arr
				// })

			}
		}
	}
</script>

<style lang="scss" scoped>
	.found {
		background-color: #F1ECE7;
		// height: 100%;
		height: 100vh;
		overflow: auto;
	}

	.main {
		padding: 98rpx 40rpx 100rpx;

		.icons-main {
			display: flex;
			justify-content: space-evenly;
			margin: 40rpx 0;

			.imgs {
				width: 98rpx;
				height: 98rpx;
				background-color: #fff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.active {
				background-color: #354E44;
				transform: scale(1.1);
				&:hover {
					transition: all ease .5s;
				}
			}

		}

		.actile-list {
			.items {
				position: relative;
				width: 674rpx;
				// height: 382rpx;
				background-color: #fff;
				height: 100%;
				box-shadow: 0 12rpx 16rpx 0 rgba(83, 66, 49, 0.03);
				border-radius: 24rpx;
				overflow: hidden;
				margin: 56rpx 0;

				.imgs {
					// width: 674rpx;
					width: 100%;
					height: 382rpx;
					// padding-bottom: 100rpx;

					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
					}
				}

				.item-main {
					position: absolute;
					left: 40rpx;
					top: 244rpx;
					color: #fff;

					.title {
						font-size: 48rpx;
						margin-bottom: 5rpx;
					}

					.author {
						font-size: 30rpx;
					}
				}

				.items-bottom {
					padding: 32rpx 53rpx;
					// position: absolute;
					// left: 53rpx;
					display: flex;
					justify-content: space-between;

					.icons-left,
					.icons-right {
						width: 44rpx;
						height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.icons-right {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}

	.nav-bar {
		background-color: #354E44;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;

		.centers {
			display: flex;

			.recommend {
				margin-right: 20rpx;
			}

			.active {
				padding-bottom: 12rpx;
				border-bottom: 2rpx solid #fff;
			}
		}
	}
</style>
